import React, { useContext, useEffect, useState } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Alert,
  Platform,
  StatusBar,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import Dropdown from "../../components/dropdown";
import MaterialContext from "../../context/suppiler/materialContext";
import ComMaterialContext from "../../context/suppiler/comMaterialContext";
import LoadingBar from "../../components/LoadingBar";
const MaterialAdd = (props) => {
  const { material } = useContext(MaterialContext);
  const { addComMaterial } = useContext(ComMaterialContext);

  const categories = material.map((item) => {
    return item.category;
  });
  // console.log("种类", categories);

  const calType = ["按面积", "按重量"];
  const [category, setCategory] = useState(0);
  const [type, setType] = useState(0);
  const [cost, setCost] = useState("");
  const [selected, setSelected] = useState(0); //0表示按面积，1表示按重量
  const [isLoading, setIsLoading] = useState(false);

  const confirmAdd = () => {
    Alert.alert("提示", "确定要提交吗?", [
      {
        text: "取消",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel",
      },
      {
        text: "确定",
        onPress: () => {
          if (cost == "" || cost == 0) {
            Alert.alert("提示", "原料费不能为空", [{ text: "确定" }]);
            return;
          }
          setIsLoading(true);
          let item = {
            category: categories[category],
            type: material[category].types[type].type,
            density: material[category].types[type].density,

            m_cost: cost,
            processMode: selected,
          };
          console.log("添加的材料为", item);
          addComMaterial(
            item,
            () => {
              props.navigation.navigate("SupplierHome");
            },
            () => {
              setIsLoading(false);
            }
          );
        },
      },
    ]);
  };
  return (
    <View style={styles.page}>
      <LoadingBar visible={isLoading} />
      <TouchableOpacity
        style={styles.back}
        onPress={() => {
          props.navigation.goBack();
        }}
      >
        <AntDesign name="left" size={20} color="#fff9ed" />
      </TouchableOpacity>
      <View style={styles.backgroundTop}></View>
      <View style={styles.addModal}>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            marginBottom: 5,
          }}
        >
          <AntDesign
            name="pushpino"
            size={23}
            color="#f9be7d"
            style={{ marginRight: 10 }}
          />
          <Text style={styles.bigTitle}>添加材料</Text>
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>类别:</Text>
          <Dropdown
            ifFirst={1}
            initialValues={{
              initKey: category,
              initOptions: categories,
            }}
            initialStyles={{
              valueWith: 217,
              valueMarginTop: 0,
              optionsWidth: 110,
              optionsBackGroundColor: "#eee",
              optionsBorderColor: "#ccc",
            }}
            onSelect={(item, value) => {
              setCategory(value);
            }}
          />
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>型号:</Text>
          <Dropdown
            ifFirst={1}
            initialValues={{
              initKey: type,
              initOptions: material[category].types.map((item) => {
                return item.type;
              }),
            }}
            initialStyles={{
              valueWith: 217,
              valueMarginTop: 0,
              optionsWidth: 110,
              optionsBackGroundColor: "#eee",
              optionsBorderColor: "#ccc",
            }}
            onSelect={(item, value) => {
              setType(value);
            }}
          />
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>密度:</Text>
          <Text>{material[category].types[type].density}</Text>
          <Text style={styles.title}>g/m³</Text>
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>计价方式:</Text>
          {calType.map((tag, index) => {
            return (
              <TouchableOpacity
                key={index}
                onPress={() => {
                  setSelected(index);
                  console.log("选择了---", index);
                }}
              >
                <Text
                  key={index}
                  style={index === selected ? styles.selectedTag : styles.tag}
                >
                  {tag}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>原料费:</Text>
          <TextInput
            style={{ marginLeft: 20 }}
            value={cost}
            keyboardType="numeric"
            onChangeText={(cost) => setCost(cost)}
            placeholder="请输入原料费"
          />
          {selected === 0 ? (
            <Text style={styles.title}>元/㎡</Text>
          ) : (
            <Text style={styles.title}>元/kg</Text>
          )}
        </View>
        <View style={styles.buttonOptions}>
          <TouchableOpacity
            style={styles.cancel}
            onPress={() => {
              props.navigation.goBack();
            }}
          >
            <Text style={styles.cancelText}>取消</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.confirm}
            onPress={() => {
              confirmAdd();
            }}
          >
            <Text style={styles.confirmText}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  page: {
    // backgroundColor: "#fff9ed",
    backgroundColor: "#FAFAFA",
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundTop: {
    width: "100%",
    height: "35%",
    // backgroundColor: "#6488e5",
    // backgroundColor: "#b7e5e3",
    backgroundColor: "#1C1C1C",
    borderBottomLeftRadius: 30,
    borderBottomRightRadius: 30,
    position: "absolute",
    top: 0,
  },
  back: {
    position: "absolute",
    zIndex: 10,
    top: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    left: 5,

    padding: 15,
  },
  addModal: {
    backgroundColor: "#fff",
    padding: 20,
    width: "90%",
    borderRadius: 20,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  bigTitle: {
    fontSize: 22,
    color: "#22254c",
    alignSelf: "center",
    fontWeight: "900",
  },
  addItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 15,
    marginBottom: 5,
    alignItems: "center",
  },
  title: {
    fontSize: 16,
    color: "#22254c",
  },
  tag: {
    borderWidth: 1,
    borderColor: "#d1d1d6",
    padding: 1,
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 10,
    color: "#d1d1d6",
    fontSize: 14,
  },
  selectedTag: {
    borderWidth: 1,
    borderColor: "#F9be7d",
    padding: 1,
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 10,
    color: "#F9be7d",
  },
  buttonOptions: {
    flexDirection: "row",
    justifyContent: "center",
    alignContent: "center",
    padding: 15,
    marginBottom: 5,
  },
  cancel: {
    flex: 3,
    padding: 10,
    marginRight: 20,
    borderWidth: 1.5,
    borderColor: "#F9be7d",

    alignItems: "center",
    justifyContent: "center",
    borderRadius: 5,
  },
  confirm: {
    borderRadius: 5,
    flex: 7,
    padding: 10,
    backgroundColor: "#F9be7d",
    alignItems: "center",
    justifyContent: "center",
    elevation: 2, //设置阴影角度，通过这个设置有无阴影
    shadowColor: "gray", // 设置阴影色
  },
  cancelText: {
    fontSize: 16,
    color: "#22254c",
  },
  confirmText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default MaterialAdd;
